<template>
  <div class="adds">
    <div class="box">
      <div class="opt">选择地址</div>
      <div class="ads">
        <p>收货人</p>
        <input class="name" type="text" />
        <p class="ct">选择城市</p>
        <input type="text" />
        <p class="ct2">详细地址</p>
        <input type="text" />
        <p class="phone">收货人手机</p>
        <input type="number" />
        <p><button class="send">添加</button></p>
      </div>

      <div class="myads">
        <p v-show="flag">您还未保存地址</p>
        <p>已保存地址</p>
        <div>
          <table class="table">
            <thead>
              <tr>
                <th>收货人</th>
                <th>地址</th>
                <th>电话</th>
                <th>操作</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in address" :key="index">
                <td>{{ item.name }}</td>
                <td class="add">{{ item.address }}</td>
                <td>{{ item.phone }}</td>
                <td>
                  <span class="alt">修改</span> <span class="det">删除</span>
                </td>
                <td><span>设为默认</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less" >
* {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input {
  width: 400px;
  outline: none;
  height: 42px;
  border-radius: 0;
  border: 1px solid #eeeeee;

  max-width: 100%;
  background: none;
}
tr td {
  font-size: 16px;
  span {
    font-size: 16px;
    cursor: pointer;
  }
}
p {
  display: block;
  font-weight: 500;
  font-size: 21px;
  margin-top: 20px;
  color: #333;
  text-transform: capitalize;
}
.box {
  width: 1200px;
  margin: auto;
 
  
}
.ads {
  display: inline-block;
  padding: 40px 30px;
  border: 1px solid #f3f3f3;
  margin-bottom: 25px;
  width: 600px;
  border-radius: 0;
}
.name {
  width: 200px;
}
.send {
  border: none;
  width: 100px;
  background-color: #7f87ab;
  color: #ffffff;
  height: 40px;
}
.alt {
  border-right: black solid 1px;
  padding-right: 5px;
}
.opt{
    font-size: 26px;
    margin-top: 12px;
}
</style>

<script>
export default {
  data() {
    return {
      address: [
        {
          id: 1,
          name: "小明",
          address: "江西赣州南康区",
          phone: "18070515603",
          select: "1",
          user: "s",
        },
        {
          id: 1,
          name: "小华",
          address: "江西省景德镇浮梁湘湖",
          phone: "14398813911",
          select: "1",
          user: "s",
        },
      ],
      flag:false
    };
  },
  methods: {},
  mounted() {},
};
</script>
 
